<script lang="ts" setup>
import { Plus, Transform } from '@icon-park/vue-next'
import useVideo from '@renderer/componsables/useVideo'
import useCompress from '@renderer/componsables/useCompress'
const { addFile } = useVideo()
const { run, isRun, progressNotice } = useCompress()
progressNotice()
</script>

<template>
  <main>
    <section class="flex justify-center gap-2">
      <div class="button">
        <el-upload ref="upload" action="#" multiple :http-request="addFile" drag :show-file-list="false" accept="video/*">
          <plus theme="outline" size="24" />
        </el-upload>
      </div>
      <div class="button" @click="run">
        <transform theme="outline" size="24" class="cursor-pointer" :class="{ 'run-animate': isRun }" />
      </div>
    </section>
  </main>
</template>

<style scoped lang="scss">
.button {
  @apply w-20 h-20 rounded-lg bg-white  flex justify-center items-center;
  :deep(.el-upload-dragger) {
    padding: 0;
    border: none;
  }
  .run-animate {
    @apply animate-spin text-slate-300 cursor-wait;
  }
}
</style>
